import { useState } from 'react'

const Room = () => {
  // tuple
  let [flag, setFlag] = useState(false)
  return (
    <>
      {flag ? '屋子被照亮' : '屋子灯熄了'}
      <button onClick={() => setFlag((flag) => !flag)}>{flag ? '关' : '开'}</button>
    </>
  )
}

const PandomList = () => {
  let [arr, setArr] = useState([])
  let ranNum = Math.round(Math.random() * 10)
  return (
    <>
      <h3>随机数组</h3>
      <ul>
        {arr.map((n, index) => (
          <li key={index}>{n}</li>
        ))}
      </ul>
      <button
        onClick={() => {
          setArr([...arr, ranNum])
        }}
      >
        PUSH
      </button>
    </>
  )
}
const AudioControls = () => {
  let [volume, setStatus] = useState(0)
  let [treble, setTreble] = useState(0)
  let [mid, setMid] = useState(0)
  let [bass, setBass] = useState(0)
  return (
    <>
      <Control text={'音量'} value={volume} onIncr={() => setStatus(volume + 1)} onDecr={() => setStatus(volume - 1)} />
      <Control text={'高音'} value={treble} onIncr={() => setTreble(treble + 1)} onDecr={() => setTreble(treble - 1)} />
      <Control text={'中音'} value={mid} onIncr={() => setMid(mid + 1)} onDecr={() => setMid(mid - 1)} />
      <Control text={'低音'} value={bass} onIncr={() => setBass(bass + 1)} onDecr={() => setBass(bass - 1)} />
    </>
  )
}

const Control = ({ text, value, onIncr, onDecr }) => {
  return (
    <div className="d-flex justify-content-between" style={{ width: 200 }}>
      <button onClick={onDecr}>-</button>
      <div>
        <h3>{value}</h3>
        <h3>{text}</h3>
      </div>
      <button onClick={onIncr}>+</button>
    </div>
  )
}

const AudioControls2 = () => {
  const names = {
    volume: '音量',
    treble: '高音',
    mid: '中音',
    bass: '低音',
  }
  const [audio, setAudio] = useState({ volume: 0, bass: 0, mid: 0, treble: 0 })
  return (
    <>
      {Object.keys(names).map((key) => (
        <Control key={key} text={names[key]} value={audio[key]} onIncr={() => setAudio({ ...audio, [key]: audio[key] + 1 })} onDecr={() => setAudio({ ...audio, [key]: audio[key] - 1 })} />
      ))}
    </>
  )
}

function Practice() {
  return (
    <>
      <Room />
      <PandomList />
      <AudioControls />
      <hr />
      <AudioControls2 />
    </>
  )
}
export default Practice
